<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			.p1 {
				transition: 1s;
				cursor: pointer;
				width: 500px;
				border-radius: 10px;
			}

			.p1:hover {
				opacity: 0.8;
				transition: 1s;
			}

			.p2 {
				position: fixed;
				top: 0;
				width: 100vw;
				height: 100vh;
				background-color: black;
				z-index: 10;
			}
			.p3{
				color: #f1f1f1;
				font-size: 40px;
				font-weight: 900;
				cursor: pointer;
				position: absolute;
				right: 20px;
				transition: 0.3s;
			}
			
			.p3:hover{
				color: #c7c7c7;
				transition: 0.3s;
			}
			
			.p4{
				position: absolute;
				top: 25%;
				width: 100%;
				text-align: center;
			}
			.p4 img{
				height: 50vh;
				transform: scale(1);
				animation: p5 1s;
			}
			.p4 p{
				color: white;
				transform: scale(1);
				animation: p5 1s;
			}
			
			@keyframes p5{
				from{transform: scale(0.1);}
				to{transform: scale(1);}
			}
		</style>
	</head>
	<body id="p4">
		<div>
			<h1>图片模糊框</h1>
			<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p>
			<p>首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。</p>
			<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
			<img id="p3" class="p1" src="https://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" />


			<div class="p2" id="p2">
				<div class="p3" id="p1" onclick="close2()">
					x
				</div>
				<div class="p4">
					 <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg"/>
					 <p>Northern Lights, Norway</p>
				</div>
			</div>
		</div>
		<script>
			var p2 = document.getElementById("p2");
			p2.remove();
			document.getElementById("p3").addEventListener("click",function(){
				document.getElementById("p4").append(p2);
			});
			function close2(){
				document.getElementById("p4").removeChild(p2);
			}
		</script>
	</body>
</html>